<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const arrAy = [
  {
    id: "1",
    title: "每日推荐",
    router: "index",
    Subclass: [], //是否有二级三级等等菜单
  },
  {
    id: "2",
    title: "推荐游记",
    router: "reco-travel",
    Subclass: [],
  },
  {
    id: "3",
    title: "游记管理",
    router: "travel-manag",
    Subclass: [],
  },
  {
    id: "4",
    title: "用户管理",
    router: "user-manag",
    Subclass: [],
  },
  {
    id: "5",
    title: "数据分析",
    router: "analysis",
    Subclass: [],
  },
  {
    id: "6",
    title: "后台设置",
    router: "back-setting",
    Subclass: [],
  },
];

// 用户信息
const userInfo = ref({
  avatar: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", // 默认头像
  nickname: "管理员", // 默认昵称
});

// 添加响应式的 defaultActive
const defaultActive = ref(localStorage.getItem("menuid") || "index");

// 获取第一个菜单的路由路径作为默认值
function selectActive(index) {
  defaultActive.value = index;
  localStorage.setItem("menuid", index);
}
// 退出登录
const handleLogout = () => {
  localStorage.removeItem("adminInfor");
  router.push("/");
};
</script>
<template>
  <div class="layout">
    <div class="left">
      <el-row class="tac">
        <el-menu :default-active="defaultActive" router>
          <div class="user-info">
            <el-avatar :size="60" :src="userInfo.avatar" />
            <div class="user-detail">
              <div class="nickname">{{ userInfo.nickname }}</div>
            </div>
          </div>
          <el-menu-item
            v-for="item in arrAy"
            :key="item.id"
            :index="item.router"
            @click="selectActive(item.router)"
          >
            <span>{{ item.title }}</span>
          </el-menu-item>
          <el-menu-item class="btu">
            <span @click="handleLogout">退出登录</span>
          </el-menu-item>
        </el-menu>
      </el-row>
    </div>
    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>
<style scoped lang="scss">
.layout {
  display: flex;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  .left {
    height: 100vh;
    border-right: 1px solid #e6e6e6;
    background: #fff;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);

    .tac {
      width: 240px;
      height: 100vh;
      position: relative;

      .el-menu {
        width: 100%;
        border-right: none;

        .user-info {
          padding: 30px 20px;
          text-align: center;
          border-bottom: 1px solid #f0f0f0;
          background: linear-gradient(to bottom, #f8f9fa, #fff);

          .el-avatar {
            margin-bottom: 12px;
            border: 3px solid #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;

            &:hover {
              transform: scale(1.05);
            }
          }

          .user-detail {
            .nickname {
              font-size: 16px;
              font-weight: 600;
              color: #2c3e50;
            }
          }
        }

        .el-menu-item {
          height: 56px;
          line-height: 56px;
          margin: 4px 0;

          span {
            font-size: 15px;
            font-weight: 500;
            transition: all 0.3s;
          }

          &:hover {
            background: #f0f7ff;

            span {
              color: #409eff;
            }
          }

          &.is-active {
            background: #ecf5ff;
            border-right: 3px solid #409eff;

            span {
              color: #409eff;
            }
          }
        }

        .btu {
          position: absolute;
          bottom: 0;
          width: 100%;
          border-top: 1px solid #f0f0f0;
          background: #fff;
          transition: all 0.3s;

          span {
            color: #f56c6c;
            font-weight: 500;
          }

          &:hover {
            background: #fff3f3;
          }
        }
      }
    }
  }

  .right {
    flex: 1;
    height: 100vh;
    background-color: #f5f7fa;
    padding: 20px 40px;
    overflow-y: auto;
    box-sizing: border-box;

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: #ddd;
      border-radius: 3px;
    }
  }
}
</style>
